<!--
 * @FileDescription 多媒体播放速度
 * @Author 杨宇翔
 * @Date 20220824 16:49:31
 * @LastEditors 杨宇翔
 * @LastEditTime 20220824 16:49:31
-->
<template>
    <div ref="element" class="media-speed">
        <div class="header" @click="state = !state">
            {{ selection }}
        </div>
        <div class="container" v-show="state">
            <span v-for="[value, name] of props.Options" :key="value" :checked="props.modelValue == value"
                @click="OnSelectionChanged(value)">
                {{
                        name
                }}
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, Ref, ref, watch } from 'vue';

interface Props {
    Options: Map<number, string>;
    modelValue: number;
}

interface Emits {
    (event: 'update:modelValue', value: number): void;
}

const props = defineProps<Props>();
const emits = defineEmits<Emits>();

const state = ref(false);

const selection = computed(() => props.Options.get(props.modelValue));

const element: Ref<HTMLDivElement | null> = ref(null);

watch(state, value => element.value!.style.zIndex = value ? '1' : '0');

function OnSelectionChanged(value: number): void {
    state.value = false;
    emits('update:modelValue', value);
}

function OnClose(event: MouseEvent): void {
    state.value = false;
}

onMounted(() => document.addEventListener('mouseup', OnClose));
onUnmounted(() => document.removeEventListener('mouseup', OnClose));
</script>

<style scoped>
.media-speed {
    position: relative;
}

.header {
    color: white;
    font-size: 1.8rem;
}

.container {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1rem);

    transform: translateX(-50%);

    background-color: #000000e6;
    border-radius: 0.5rem;

    padding: 1.5rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.container>span {
    color: white;
    font-size: 1.6rem;
    line-height: 1.6rem;
}

.container>span[checked=true] {
    color: #199aff;
}
</style>